<template>
  <div class="fenle">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card class="box-card">
        <div>
          <el-alert
              title="注意：只允许为第三级分类设置相关参数"
              type="warning">
          </el-alert>
        </div>
        <div class="xuanzi">
            <span>选择商品分类：</span>
          <el-cascader
              :options="options"
              :props="defaultParams"
              v-model="cat"
              @change="handleChange"></el-cascader>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="first">
            <el-button type="primary" v-if="!shows" disabled>添加动态参数</el-button>
            <el-button type="primary" v-if="shows" @click="dongtaics">添加动态参数</el-button>
            <el-dialog title="添加动态参数" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="动态参数">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="tianjdt">确 定</el-button>
              </div>
            </el-dialog>
            <el-table :data="tableData" stripe border style="width: 83vw; margin-top:10px">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="商品名称">
                      <span>{{ props.row.name }}</span>
                    </el-form-item>
                    <el-form-item label="所属店铺">
                      <span>{{ props.row.shop }}</span>
                    </el-form-item>
                    <el-form-item label="商品 ID">
                      <span>{{ props.row.id }}</span>
                    </el-form-item>
                    <el-form-item label="店铺 ID">
                      <span>{{ props.row.shopId }}</span>
                    </el-form-item>
                    <el-form-item label="商品分类">
                      <span>{{ props.row.category }}</span>
                    </el-form-item>
                    <el-form-item label="店铺地址">
                      <span>{{ props.row.address }}</span>
                    </el-form-item>
                    <el-form-item label="商品描述">
                      <span>{{ props.row.desc }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column type="index" label="" width="90">
              </el-table-column>
              <el-table-column prop="attr_name" label="参数名称">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作">
                <template slot-scope="scope">

                    <el-button
                        size="mini"
                        slot="reference"
                        @click="handleEdit(scope.row.attr_id)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        slot="reference"
                        style="margin-left: 10px"
                        @click="handleDelete(scope.row.attr_id)">删除</el-button>

                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="静态属性" name="second">
            <el-button type="primary" v-if="!shows" disabled>添加静态参数</el-button>
            <el-button type="primary" v-if="shows" @click="jingtaics">添加静态参数</el-button>
            <el-dialog title="添加静态参数" :visible.sync="dialogFormVisible">
              <el-form :model="form">
                <el-form-item label="静态参数">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="tianjt">确 定</el-button>
              </div>
            </el-dialog>
            <el-table :data="tableData" stripe border style="width: 83vw; margin-top:10px">
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="商品名称">
                      <span>{{ props.row.name }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column type="index" label="" width="90">
              </el-table-column>
              <el-table-column prop="attr_name" label="属性名称">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        slot="reference"
                        @click="handleEdit1(scope.row.attr_id)">编辑</el-button>

                    <el-button
                        size="mini"
                        type="danger"
                        slot="reference"
                        style="margin-left: 10px"
                        @click="handleDelete1(scope.row.attr_id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>

      </el-card>
  </div>
</template>

<script>
export default {
  name: "OrderSettingView",
  data(){
    return{
      activeName:'first',
      options:[],
      defaultParams: {
        label: "cat_name",
        value: "cat_id",
        emitPath:"fals",

      },
      cat:"",
      id:"",
      tableData:[],
      sel:"many",
      shows:false,
      form: {
        name: '',
        name1: '',
      },
      dialogFormVisible:false,
    }
  },
  methods: {
    handleEdit(val) {
      this.$prompt('动态参数', '修改动态参数', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.xiug(val,"many",value)
        this.$message({
          type: 'success',
          message: '修改成功'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消修改'
        });
      });
    },
    handleEdit1(val) {
      this.$prompt('动态参数', '修改动态参数', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.xiug(val,"only",value)
        this.$message({
          type: 'success',
          message: '修改成功'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消修改'
        });
      });
    },
    async xiug(val,cell,value){
      let obj = {
        id: this.id,
        attrid:val,
        attr_name: value,
        attr_sel: cell,
        attr_write: "list",
        attr_vals: "a,b,c"
      }
      let res1 = await this.$http.putCategories(obj)
      let res = await this.$http.getCategories({sel: cell, id: this.id})
      this.tableData = res.data.data
    },
    async handleDelete(val) {
      this.$confirm('此操作将移除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.a(val,"many")
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async a(val,sell){
      let obj = {
        id: this.id,
        attrid: val
      }
      let res1 = await this.$http.delCate(obj)
      let res = await this.$http.getCategories({sel: sell, id: this.id})
      this.tableData = res.data.data
      console.log(obj)

    },
    async handleDelete1(val) {
      this.$confirm('此操作将移除该权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.a(val,"only")
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async handleClick(a) {
      console.log(a.index)
      if (a.index == 0) {
        this.sel = "many"
        let res = await this.$http.getCategories({sel: "many", id: this.id})
        this.tableData = res.data.data
        this.$message({
          message: '获取数据成功',
          type: 'success'
        });
        console.log(res.data.data)
      } else {
        this.sel = "only"
        let res = await this.$http.getCategories({sel: "only", id: this.id})
        this.tableData = res.data.data
        this.$message({
          message: '获取数据成功',
          type: 'success'
        });
      }
    },
    async handleChange(a) {
      this.id = a[2]
      let res = await this.$http.getCategories({sel: this.sel, id: this.id})
      this.tableData = res.data.data
      this.shows = true
      this.$message({
        message: '获取数据成功',
        type: 'success'
      });

    },
    dongtaics() {
      this.dialogFormVisible = true
    },
    jingtaics() {
      this.dialogFormVisible = true
    },
    async tianjdt() {
      this.dialogFormVisible = false
      let obj = {
        id: this.id,
        sel: this.sel,
        attr_name: this.form.name,
        attr_sel: "many",
        attr_write: "list",
        attr_vals: "a,b,c"
      }
      let res = await this.$http.postCategories(obj)
      console.log(res)
      if (res.data.meta.status == 201) {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
        let res1 = await this.$http.getCategories({sel: "many", id: this.id})
        this.tableData = res1.data.data
      }
    },
    async tianjt() {
      this.dialogFormVisible = false
      let obj = {
        id: this.id,
        sel: this.sel,
        attr_name: this.form.name,
        attr_sel: "only",
        attr_write: "list",
        attr_vals: "a,b,c"
      }
      let res = await this.$http.postCategories(obj)
      console.log(res)
      if (res.data.meta.status == 201) {
        this.$message({
          message: '添加成功',
          type: 'success'
        });
        let res1 = await this.$http.getCategories({sel: "only", id: this.id})
        this.tableData = res1.data.data
      }
    },
    async xiujdt() {
      this.dialogFormVisible1 = false
      let obj = {
        id: this.id,
        sel: this.sel,
        attr_name: this.form.name1,
        attr_sel: "only",
        attr_write: "list",
        attr_vals: "a,b,c"
      }
      let res = await this.$http.putCategories(obj)
      console.log(res)
      if (res.data.meta.status == 201) {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        let res1 = await this.$http.getCategories({sel: "only", id: this.id})
        this.tableData = res1.data.data
      }
    },
  },
  async created() {
    let res = await this.$http.getCate()
    console.log(res)
    this.options = res.data.data

  },
}
</script>

<style scoped lang="scss">
  .fenle{
    color: #333;
    width: 100%;
    height: 89vh;
    overflow-y: auto;
    padding: 20px;
    .el-card {
      margin-top: 10px;
      .el-card__body {
        padding: 20px;
      }
      .el-table .el-table__cell {
        font-size: 12px;
        padding: 10px 0;
      }

    }
  }
</style>